<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <div style="max-height: 360px; padding: 0px; overflow: auto">
      <el-tree
        ref="treeRef"
        accordion
        :check-strictly="false"
        class="custom-tree"
        :data="treeOptions.dataList"
        :default-expanded-keys="expanderKeys"
        highlight-current
        node-key="id"
        :props="treeOptions.props"
        :show-checkbox="multiple"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <IconifyIconOnline v-if="data.iconCls" :icon="data.iconCls" />
            {{ node.label }}
          </span>
        </template>
      </el-tree>
    </div>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button icon="circle-check" type="primary" @click="save">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup name="RoleMenu">
import { useMessage, useMessageBox } from "@/hooks/message";
import { queryMenuTree } from "@/api/admin/system/menu/";
import { queryRoleMenu, updateRoleMenu } from "@/api/admin/org/role";
import { useTree } from "@/hooks/tree";

const props = defineProps({
  title: {
    type: String,
    default: "角色资源"
  },
  width: {
    type: String,
    default: "40%"
  },
  model: {
    type: Boolean,
    default: true
  },
  multiple: {
    type: Boolean,
    default: true
  },
  expanderKeys: {
    type: Array,
    default: function () {
      return [];
    }
  }
});
const emits = defineEmits(["confirm"]);

const treeRef = ref(null);

const treeOptions = reactive({
  autoLoad: false,
  queryForm: { roleId: "" },
  props: {
    children: "children",
    label: "text"
  },
  queryFunction: queryMenuTree,
  onLoaded: async function () {
    await initMenuChecked();
  }
});

const { queryTreeData, handleReset } = useTree(treeOptions);

const state = reactive({
  roleId: "",
  dialogTitle: props.title,
  dialogVisible: false
});

const show = roleId => {
  console.log("show", roleId);
  state.roleId = roleId;
  queryTreeData({ pid: null });
  state.dialogVisible = true;
};

const close = () => {
  handleReset();
  state.dialogVisible = false;
};

const save = async () => {
  let nodes;
  if (props.multiple) {
    nodes = treeRef.value.getCheckedNodes(false, true);
  } else {
    nodes = treeRef.value.getCurrentNode();
  }
  const params = {};
  params.roleId = state.roleId;
  const menuIds = nodes.map(item => item.id).join(",");
  params.menuIds = menuIds;
  const { code, msg } = await updateRoleMenu(params);
  if (code && code === 200) {
    useMessage().success(msg);
    emits("confirm", nodes);
    close();
  } else {
    useMessage().warning(msg);
  }
};

const initMenuChecked = async () => {
  const params = {};
  params.roleId = state.roleId;
  const { code, data } = await queryRoleMenu(params);
  if (code && code == 200 && data.roleMenuList) {
    const roleMenuList = data.roleMenuList;
    const menuIds = roleMenuList.map(item => item.menuId);
    menuIds.forEach(item => {
      const node = treeRef.value.getNode(item);
      if (node) {
        treeRef.value.setChecked(node, true);
      }
    });
  }
};

defineExpose({
  show,
  close,
  save
});
</script>
<style lang="scss" scoped>
.dialog-container {
  min-height: 360px !important;
  max-height: 520px !important;
  overflow: auto;
}
</style>
